{% extends 'base.html' %}

{% block title %}库存查询 - 库存信息管理系统{% endblock %}

{% block content %}
<div class="card mb-4">
    <div class="card-header bg-success text-white">
        <h4 class="mb-0">库存信息查询</h4>
    </div>
    <div class="card-body">
        <!-- 搜索表单 -->
        <form method="GET" action="{{ url_for('inventory') }}" class="mb-4">
            <div class="input-group">
                <input type="text" class="form-control" name="search"
                       placeholder="请输入物品名称进行搜索..."
                       value="{{ search_query }}">
                <button class="btn btn-primary" type="submit">搜索</button>
                {% if search_query %}
                <a href="{{ url_for('inventory') }}" class="btn btn-outline-secondary">清除</a>
                {% endif %}
            </div>
        </form>

        <!-- 搜索结果提示 -->
        {% if search_query %}
            <div class="alert alert-info">
                {% if items %}
                    搜索结果: 找到包含 "{{ search_query }}" 的物品 {{ items|length }} 个
                {% else %}
                    未找到包含 "{{ search_query }}" 的物品
                {% endif %}
            </div>
        {% endif %}

        <!-- 库存表格 -->
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-light">
                    <tr>
                        <th>物品编号</th>
                        <th>物品名称</th>
                        <th>规格型号</th>
                        <th>材质</th>
                        <th>单位</th>
                        <th>单价 (元)</th>
                        <th>数量</th>
                        <th>总价值 (元)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>{{ item.item_code }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.specification or '-' }}</td>
                        <td>{{ item.material or '-' }}</td>
                        <td>{{ item.unit }}</td>
                        <td>{{ "%.2f"|format(item.price) }}</td>
                        <td>{{ item.quantity }}{{ item.unit }}</td>
                        <td>{{ "%.2f"|format(item.total_value) }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-3">
                            暂无库存数据，请先进行入库操作
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 自动聚焦搜索框
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.querySelector('input[name="search"]');
        if (searchInput) {
            searchInput.focus();
        }

        // 支持回车键提交搜索
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.querySelector('form').submit();
            }
        });
    });
</script>
{% endblock %}